/<template>
  <div class="box">
    <div
      class="backgroundImage"
      ref="mybox"
      :style="{ backgroundImage: 'url(' + backgroudImg + ')' }"
    >
      <div class="input">
        <div class="input_one">
          <img src="../../assets/img/广播.png" alt="" />
          <div class="input_one_right">
            <van-swipe vertical :autoplay="2000" class="swiper">
              <van-swipe-item class="swiperItemheng"
                >1.袁隆平安葬仪式上这句话让人破备份</van-swipe-item
              >
              <van-swipe-item
                >2.袁隆平安葬仪式上这句话让人破备份</van-swipe-item
              >
              <van-swipe-item
                >3.袁隆平安葬仪式上这句话让人破备份</van-swipe-item
              >
              <van-swipe-item
                >4.袁隆平安葬仪式上这句话让人破备份</van-swipe-item
              >
            </van-swipe>
          </div>
        </div>
        <div class="input_two">
          <input type="text" placeholder="安徒生童话" />
        </div>
      </div>
      <div class="swiper_con">
        <van-swipe :autoplay="2000" class="swipers">
          <van-swipe-item
            class="swiperItem"
            v-for="(item, index) in swiper_List"
            :key="index"
            ><img :src="item.src" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="conten_conone">
      <div
        class="conten_content"
        v-for="(item, index) in con_List"
        :key="index"
      >
        <img :src="item.img" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="top" ref="ls">
      <div class="div">
        <div class="divs">
          <div class="divs_top">
            <h1>今日听书</h1>
            <p>
              “从这本书中寻找自信、坚强与乐观，相信大家看过以后，一定会终生受益。”
            </p>
            <div class="divs_buttom">
              <div class="divs_buttomleft">
                <img src="../../assets/img/专题.png" alt="" />
              </div>
              <div class="divs_buttomright">
                <h3>假如给我三天光明</h3>
                <h5>
                  <img src="../../assets/img/播者.png" alt="" /><span
                    >张菊红</span
                  >
                </h5>
                <h5>
                  <img src="../../assets/img/播放.png" alt="" /><span
                    >247603</span
                  >
                </h5>
              </div>
            </div>
          </div>
        </div>
        <div class="divs">
          <div class="divs_top">
            <h1>今日听书</h1>
            <p>
              “从这本书中寻找自信、坚强与乐观，相信大家看过以后，一定会终生受益。”
            </p>
            <div class="divs_buttom">
              <div class="divs_buttomleft">
                <img src="../../assets/img/专题.png" alt="" />
              </div>
              <div class="divs_buttomright">
                <h3>假如给我三天光明</h3>
                <h5>
                  <img src="../../assets/img/播者.png" alt="" /><span
                    >张菊红</span
                  >
                </h5>
                <h5>
                  <img src="../../assets/img/播放.png" alt="" /><span
                    >247603</span
                  >
                </h5>
              </div>
            </div>
          </div>
        </div>
        <div class="divs"><span>11</span></div>
      </div>
    </div>
    <Index />
    <Sishi />
    <Yuandu />
    <Sleep />
    <Douban />
  </div>
</template>

<script>
import Index from "../../components/index";
import Sishi from "../../components/sishi";
import Yuandu from "../../components/yuandu";
import Sleep from "../../components/sleep";
import Douban from "../../components/douban";

export default {
  name: "index",
  components: {
    Index,
    Sishi,
    Yuandu,
    Sleep,
    Douban,
  },
  data() {
    return {
      swiper_List: [
        {
          src: require("../../assets/img/1.png"),
        },
        {
          src: require("../../assets/img/1.png"),
        },
      ],
      backgroudImg: "../../assets/img/星光背景.png",
      con_List: [
        {
          img: require("../../assets/img/专题.png"),
          name: "专题",
        },
        {
          img: require("../../assets/img/荐读.png"),
          name: "荐读",
        },
        {
          img: require("../../assets/img/党史.png"),
          name: "党史",
        },
        {
          img: require("../../assets/img/听闻.png"),
          name: "听闻",
        },
        {
          img: require("../../assets/img/文萃.png"),
          name: "文萃",
        },
      ],
    };
  },
  mounted() {
    this.swipers();
  },
  created() {},
  methods: {
    swipers() {
      const img = this.$refs.mybox;
      for (let i = 0; i < this.swiper_List.length; i++) {
        if (i === 0) {
          img.style = "background:'red'";
        }
        if (i === 1) {
          img.style.backgroundImage =
            "url(" +
            require("../../assets/img/星光背景(2).png") +
            ") no-repeat";
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  background: #f7f7f7;
  overflow-y: auto;
}
input::-webkit-input-placeholder {
  /* placeholder颜色 */
  color: #ffffff;
  /* placeholder字体大小 */
  font-size: 16px;
}
.backgroundImage {
  width: 100%;
  height: 280px;
  background: url(../../assets/img/星光背景.png) no-repeat;
  background-size: 100% 100%;
}

.input {
  width: 100%;
  height: 100px;
  // border: 2px solid #fff;
  display: flex;
  justify-content: space-around;
  padding: 30px 0;
}
.input_one {
  width: 60%;
  height: 40px;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 27px;
  position: relative;
}
.input_one img {
  width: 30px;
  height: 21px;
  position: absolute;
  left: 24px;
  top: 6px;
}
.input_two {
  width: 30%;
  height: 40px;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 27px;
}
.input_two input {
  width: 90%;
  line-height: 34px;
  border: 0;
  // border-style: none;
  // background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, #69aae4 100%);
  background: rgba(255, 255, 255, 0);
}
/deep/ .van-swipe__indicators {
  display: none;
}
.swiper {
  width: 155px;
  height: 30px;
  position: absolute;
  left: 51px;
  top: 9px;
  overflow: hidden;
  color: #ffffff;
}
.swiperItemheng {
  font-size: 16px;
}
/deep/.van-swipe-item {
  width: 300px;
}
.swiper_con {
  width: 90%;
  height: 126px;
  // background: red;
  margin: 0px 20px 0 20px;
}
.swiperItem img {
  width: 90%;
  height: 156px;
}
.conten_conone {
  width: 90%;
  height: 120px;
  background: #fff;
  border-radius: 12px;
  margin: 20px 20px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
}
.conten_content {
  // flex-direction: column;
  display: flex;
  flex-direction: column;
  // align-items: center;
}
.conten_content img {
  width: 46px;
  height: 46px;
}
.top {
  width: 90%;
  height: 300px;
  overflow-x: scroll;
  margin: 20px 0px 0 20px;
}
::-webkit-scrollbar {
  display: none;
}

.div {
  width: 260%;
  display: flex;
  justify-content: space-around;
}
.divs {
  // width: 50%;
  height: 300px;
  background: #ffffff;
  // margin-left: 20%;
  margin: 0px 20px 0 0px;
  border-radius: 12px 12px 0px 0px;
  border: 2px solid #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.04);
  .divs_top {
    width: 100%;
    height: 70%;
    margin: -20px 0 0 0;
    border-radius: 12px 12px 0px 0px;
    // background: linear-gradient(360deg, rgba(248, 211, 195, 0) 0%);
    // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07);
    background: linear-gradient(
      360deg,
      rgba(248, 211, 195, 0) 0%,
      #ffb090 100%
    );
    // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07);
  }
  .divs_top h1 {
    width: 120px;
    font-size: 24px;
    padding: 30px 0px 0 15px;
  }
  .divs_top p {
    width: 260px;
    font-size: 14px;
    padding: 0px 0px 0 7px;
    display: flex;
    flex-wrap: wrap;
    font-family: PingFangSC-Medium, PingFang SC;
  }
}
.divs_buttom {
  width: 100%;
  height: 76%;
  // background: rebeccapurple;
  display: flex;
  margin-top: 10%;
}
.divs_buttomleft {
  width: 45%;
  // background: gold !important;
}
.divs_buttomleft img {
  width: 110px;
  height: 110px;
}
.divs_buttomright {
  width: 55%;
  // background: blue !important;
}
.divs_buttomright h3 {
  width: 100%;
  font-size: 20px;
  overflow: hidden;
  white-space: nowrap;
  /*文字超出宽度则显示ellipsis省略号*/
  text-overflow: ellipsis;
}
.divs_buttomright h5 {
  width: 100%;
  // height: 10px;
  font-size: 20px;
  overflow: hidden;
  // padding: 0 0 0 -10px;
  white-space: nowrap;
  /*文字超出宽度则显示ellipsis省略号*/
  text-overflow: ellipsis;
  display: flex;
  // align-items: center;
  // justify-content: space-around;
}
.divs_buttomright img {
  width: 14px;
  height: 14px;
  margin-left: 10%;
  margin-top: 5px;
}
.divs_buttomright span {
  margin-left: 10%;
  font-size: 14px;
  margin-top: 5px;
}
</style>